<template>
  <modal-bg ref="cityRef" @cancel="onCancel">
    <view
      style="
        height: 841rpx;
        width: 750rpx;
        background: #ffffff;
        position: absolute;
        bottom: 0;
        font-size: 28rpx;
        border-bottom: 1rpx #f5f5f5 solid;
      ">
      <view
        @touchmove.stop.prevent
        style="
          display: flex;
          justify-content: space-between;
          font-weight: 600;
          font-size: 32rpx;
          line-height: 98rpx;
          padding: 0 30rpx;
        ">
        <view @click.stop="onCancel" style="color: #222222">取消</view>
        <view @click.stop="onOK" style="color: #2c61f4">确定</view>
      </view>
      <view style="height: 743rpx; display: flex">
        <view style="overflow-y: scroll; background: #fafafa; flex: 1">
          <view
            v-for="(itm, idx) in provs"
            :key="idx"
            class="itm"
            @click.stop="onProv(itm, idx)"
            style="padding-left: 32rpx; position: relative"
            :style="{
              background: itm.cityName == prov.cityName ? '#fff' : '#fafafa',
              color: itm.cityName == prov.cityName ? '#2C61F4' : '#ADADAD'
            }">
            {{ itm.cityName }}
            <view
              v-if="itm.cityName == prov.cityName"
              style="
                width: 6rpx;
                height: 51rpx;
                background: #2c61f4;
                position: absolute;
                left: 0;
                top: 23rpx;
              "></view>
          </view>
        </view>
        <view style="padding: 0 28rpx; overflow-y: scroll; flex: 1; border-right: 1rpx #f8f8f8 solid">
          <view
            v-for="itm in citys"
            :key="itm.id"
            class="itm"
            @click.stop="onCity(itm)"
            style="border-bottom: 2rpx #f8f8f8 solid"
            :style="{
              color: itm.cityName == city.cityName ? '#2C61F4' : '#222222'
            }">
            {{ itm.cityName }}
          </view>
        </view>
        <view v-if="showArea" style="padding: 0 28rpx; overflow-y: scroll; flex: 1">
          <view
            v-for="itm in areas"
            :key="itm.id"
            class="itm"
            @click.stop="onArea(itm)"
            style="border-bottom: 2rpx #f8f8f8 solid"
            :style="{
              color: itm.cityName == area.cityName ? '#2C61F4' : '#222222'
            }">
            {{ itm.cityName }}
          </view>
        </view>
      </view>
    </view>
  </modal-bg>
</template>

<script setup>
  import { cityStore } from '@/biz/city'
  import { ref } from 'vue'
  import modalBg from './modal-bg.vue'

  const props = defineProps({ showArea: Boolean })
  const emits = defineEmits(['ok'])

  const [cityRef] = [ref()]
  const [provs, citys, city, prov, areas, area] = [ref(), ref(), ref(), ref(), ref(), ref()]

  function onCancel() {
    cityRef.value.hide()
  }
  function onOK() {
    emits('ok', { prov: prov.value, citys: citys.value, city: city.value, area: area.value })
  }

  function onProv(itm) {
    prov.value = itm
    cityStore()
      .select(itm)
      .then((res) => {
        citys.value = res.citys
        city.value = res.city
        if (props.showArea) {
          onCity(res.city)
        }
      })
  }

  function onCity(itm) {
    city.value = itm
    if (props.showArea) {
      cityStore()
        .select(itm)
        .then((res) => {
          areas.value = res.areas
          area.value = res.area
        })
    }
  }

  function onArea(itm) {
    area.value = itm
  }

  defineExpose({
    show: () => {
      provs.value = cityStore().provs
      prov.value = cityStore().prov
      citys.value = cityStore().citys
      city.value = cityStore().city
      areas.value = cityStore().areas
      area.value = cityStore().area || cityStore().areas[0]
      cityRef.value.show()
    },
    hide: () => {
      cityRef.value.hide()
    }
  })
</script>

<style lang="scss" scoped>
  .itm {
    height: 96rpx;
    line-height: 96rpx;
  }
</style>
